<template>
    <div class="doctor clearfix">
        <ul>
            <li  v-for="(data, k) in movieList" :key="k" :style="{'width': width + 'px'}">
                <img :src="data.img" alt="">
                <div class="hover">
                        <p>{{data.doctor}} <span>{{data.physician}}</span></p>
                        <p>{{data.department}}</p>
                        <img src="../../assets/renzheng.png" alt="">
                </div>
                <div class="hide" style="display: none">
                        <p>{{data.doctor}} <span>{{data.physician}}</span></p>
                        <p>{{data.department}}</p>
                        <p>擅长：{{data.good}}</p>
                        <img src="../../assets/renzheng.png" alt="">
                </div>

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "doctor",
        props: ['movieList','width'],
    }
</script>

<style scoped lang="less">
   .doctor{
       margin-bottom: 20px;
       ul{
           >:first-child{
               margin-left: 0px;
           }
           li{
               width: 274px;
               height: 186px;
               position: relative;
               float: left;
               margin-left: 32px;
               img{
                   width: 100%;
                   height: 100%;
               }
               .hover{
                   padding-top: 40px;
                   width: 275px;
                   height: 104px;
                   background-color: rgba(250,250,250,0.5);
                   position: relative;
                   top: -108px;
                   p{
                       padding-left: 20px;
                       color: #666666;
                       font-size: 14px;
                   }
                   >:first-child {
                       color: #333333;
                       font-size: 20px;
                       font-weight: bold;
                       padding-bottom: 5px;
                       span{
                           font-size: 14px;
                           margin-left: 10px;
                       }
                   }
                   >:last-child{
                       width: 42px;
                       height: 54px;
                       position: absolute;
                       top: -83px;
                       left: 220px;
                       z-index: 1;

                   }
               }
               .hide{
                   height: 186px;
                   width: 275px;
                   background-color: rgba(250,250,250,0.5);
                   position: absolute;
                   top: 0px;
                   padding-top: 100px;
                   img{
                       width: 42px;
                       height: 54px;
                       position: absolute;
                       top: 0px;
                       left: 220px;
                       z-index: 1;
                   }
                   p{
                       padding-left: 20px;
                       color: #666666;
                       font-size: 14px;
                   }
                   >:first-child{
                       color: #333333;
                       font-size: 20px;
                       font-weight: bold;
                       padding-bottom: 5px;
                       span{
                           font-size: 14px;
                           margin-left: 10px;
                       }
                   }
                   >:nth-child(3){
                       color: #ff536f;
                   }
               }

           }
           li:hover>.hide{
               display: block !important;
           }
           li:hover>.hover{
               display: none !important;
           }

       }
   }
</style>